<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<link rel="icon" href="/favicon.ico" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<script>
			window.__APP_VERSION = "<%- version %>";
			window.__URL_API_VERSION = "/v1";
			window.__URL_BASE = "<%- urlBase %>";
			window.__URL_API_BASE = "<%- urlApiBase %>";
			window.__URL_WS_BASE = "<%- urlWsBase %>";
			window.__URL_STATIC_DIR = document.querySelector(`link[rel='icon']`).href.replace("favicon.ico", "");
		</script>
		<title>--</title>
	</head>

	<body>
		<div id="app">
			<style>
				body {
					margin: 0;
				}
				.loader {
					position: absolute;
					top: 50%;
					left: 40%;
					margin-left: 10%;
					transform: translate3d(-50%, -50%, 0);
				}
				.dot {
					width: 24px;
					height: 24px;
					background: #3ac;
					border-radius: 100%;
					display: inline-block;
					animation: slide 1s infinite;
				}
				.dot:nth-child(1) {
					animation-delay: 0.1s;
					background: #32aacc;
				}
				.dot:nth-child(2) {
					animation-delay: 0.2s;
					background: #64aacc;
				}
				.dot:nth-child(3) {
					animation-delay: 0.3s;
					background: #96aacc;
				}
				.dot:nth-child(4) {
					animation-delay: 0.4s;
					background: #c8aacc;
				}
				.dot:nth-child(5) {
					animation-delay: 0.5s;
					background: #faaacc;
				}
				@-moz-keyframes slide {
					0% {
						transform: scale(1);
					}
					50% {
						opacity: 0.3;
						transform: scale(2);
					}
					100% {
						transform: scale(1);
					}
				}
				@-webkit-keyframes slide {
					0% {
						transform: scale(1);
					}
					50% {
						opacity: 0.3;
						transform: scale(2);
					}
					100% {
						transform: scale(1);
					}
				}
				@-o-keyframes slide {
					0% {
						transform: scale(1);
					}
					50% {
						opacity: 0.3;
						transform: scale(2);
					}
					100% {
						transform: scale(1);
					}
				}
				@keyframes slide {
					0% {
						transform: scale(1);
					}
					50% {
						opacity: 0.3;
						transform: scale(2);
					}
					100% {
						transform: scale(1);
					}
				}
			</style>
			<div class="loader">
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
				<div class="dot"></div>
			</div>
		</div>
		<script type="module" src="/src_yapi/main.ts"></script>
	</body>
</html>
